import React, {useEffect, useMemo, useState} from 'react';
import {IndexBar, List, NavBar, Popup} from "antd-mobile";
import {cityInfo} from "./city";

function Index({visible,onBackHandler,onSelectHandler}) {




    useEffect(() => {


    }, []);




    return (
           <div>
               <Popup
                   visible={visible}
                   bodyStyle={{height: '100vh'}}
               >
                   <div style={{height: window.innerHeight}}>
                       <NavBar back='返回' onBack={onBackHandler}>
                           选择城市
                       </NavBar>
                       <IndexBar>
                           {cityInfo.map(group => {
                               const {title, items} = group
                               return (
                                   <IndexBar.Panel
                                       index={title}
                                       title={`${title}`}
                                       key={`${title}`}
                                   >
                                       <List>
                                           {items.map((item, index) => (
                                               <List.Item arrowIcon={false} onClick={()=>onSelectHandler(item)} key={index}>{item}</List.Item>
                                           ))}
                                       </List>
                                   </IndexBar.Panel>
                               )
                           })}
                       </IndexBar>
                   </div>
               </Popup>
           </div>
    );
}

export default Index;
